<template>
	<view>
		<view class="a">
			<view class="al">
				4.6
			</view>
			<view class="am">
				分
			</view>
			<view class="ar">
				<view class="aru">
					商品评分：
					<van-rate size="37rpx" readonly value="3" bind:change="onChange" />
				</view>
				<view class="ard">
					配送评分：
					<van-rate size="37rpx" readonly value="3" bind:change="onChange" />
				</view>
			</view>
		</view>
		<view class="b">
			<view class="bl">
				<image src="../../static/dingdan_imgs/toux.png " style="height: 60rpx; width: 60rpx;" mode=""></image>
			</view>
			<view class="bru">
				用户昵称
			</view>
			<view class="brm">
				评价内容评价内容评价内容评价内容评价内容评价内容
			</view>
			<view class="brd">
				2016-09-09 15:18
			</view>
		</view>
		<view class="b">
			<view class="bl">
				<image src="../../static/dingdan_imgs/toux.png " style="height: 60rpx; width: 60rpx;" mode=""></image>
			</view>
			<view class="bru">
				用户昵称
			</view>
			<view class="brm">
				评价内容评价内容评价内容评价内容评价内容评价内容
			</view>
			<view class="brd">
				2016-09-09 15:18
			</view>
		</view>
		<view class="b">
			<view class="bl">
				<image src="../../static/dingdan_imgs/toux.png " style="height: 60rpx; width: 60rpx;" mode=""></image>
			</view>
			<view class="bru">
				用户昵称
			</view>
			<view class="brm">
				评价内容评价内容评价内容评价内容评价内容评价内容
			</view>
			<view class="brd">
				2016-09-09 15:18
			</view>
		</view>
		<view class="b">
			<view class="bl">
				<image src="../../static/dingdan_imgs/toux.png " style="height: 60rpx; width: 60rpx;" mode=""></image>
			</view>
			<view class="bru">
				用户昵称
			</view>
			<view class="brm">
				评价内容评价内容评价内容评价内容评价内容评价内容
			</view>
			<view class="brd">
				2016-09-09 15:18
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
				value: 4,
			}
		},
		methods: {
			onChange(event) {
				this.setData({
					value: event.detail,
				});
			},
		}
	}
</script>

<style>
	.a {
		height: 180rpx;
		border-bottom: 2rpx gainsboro solid;
		display: flex;
	}

	.al {
		margin-top: 60rpx;
		margin-left: 92rpx;
		font-size: 66rpx;
	}

	.am {
		margin-top: 88rpx;
		margin-left: 10rpx;
		font-size: 36rpx;
	}
	.ar{
		flex-direction: column;
	}

	.aru {
		font-size: 33rpx;
		margin-top: 40rpx;
		margin-left: 92rpx;
	}

	.ard {
		font-size: 33rpx;
		margin-top: 10rpx;
		margin-left: 92rpx;
	}
	.b{
		border-bottom: 2rpx gainsboro solid;
		height: 236rpx;
		position: relative;
	}
	.bl{
/* 		margin-top: 20rpx;
		margin-left: 20rpx; */
		position: absolute;
		top: 30rpx;
		left: 20rpx;
	}
	.bru{
		position: absolute;
		top: 33rpx;
		left: 100rpx;
		font-size: 35rpx;
	}
	.brm{
		position: absolute;
		top: 90rpx;
		left: 100rpx;
		font-size: 32rpx;
	}
	.brd{
		position: absolute;
		top: 180rpx;
		left: 100rpx;
		font-size: 24rpx;
		color: gray;
	}
	
</style>
